<template>
    <div class="flashover_box">

        <el-breadcrumb separator="/">
            <el-breadcrumb-item>产品</el-breadcrumb-item>
            <el-breadcrumb-item>乐趣管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="flashover_card">
            <!-- title -->
            <el-row class="title">
                <el-col :span='6'>
                    <span class="text">供应商：</span>
                    <el-select style="width: 70%;" size="medium" v-model="operator_id" placeholder="请选择供应商">
                        <el-option v-for="item in operatorList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>

                <el-col :span='6'>
                    <span class="text">产品名称：</span>
                    <el-input size="medium" style="width: 70%;" v-model="name" placeholder="请输入标题或编号"></el-input>
                </el-col>

                <el-col :span="10">
                    <span class="text">上传时间：</span>
                    <el-date-picker size="medium" style="width: 80%;" v-model="date" type="daterange" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期">
                    </el-date-picker>
                </el-col>

                <el-col class="filter_box" :span="2">
                    <el-button type="primary" style="padding: 9px 25px;" size="medium" plain @click="search">筛选</el-button>
                </el-col>
            </el-row>

            <!-- 主体内容 -->
            <div class="flashover_list_content">

                <!-- tab选项 -->
                <el-row class="xcx-tabs">
                    <el-col :span="24" style="width: 80%">
                        <el-button type="text" :class="(type === 0) ? '': 'disable'" @click="handleClick(0)">全部
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 1) ? '': 'disable'" @click="handleClick(1)">待审核
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 2) ? '': 'disable'" @click="handleClick(2)">已审核
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 3) ? '': 'disable'" @click="handleClick(3)">待发布
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 4) ? '': 'disable'" @click="handleClick(4)">已上线
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 5) ? '': 'disable'" @click="handleClick(5)">已下线
                        </el-button>
                    </el-col>
                </el-row>

                <!-- 表格 -->
                <el-table class="flashover_table" :data="tableData.slice((page-1)*limit,page*limit)"  style="width: 100%" border>
                    <el-table-column prop="status" label="名称" width="560">
                        <div class="detailBox" slot-scope="scope">
                            <div class="detail">
                                <div class="img_box">
                                    <img :src="scope.row.img" alt="">
                                </div>
                                <!-- 详情 -->
                                <div class="detail_right">
                                    <div class="item color1">{{ scope.row.title }}</div>
                                    <div class="item color2">起步价：{{ scope.row.cost_price }}</div>
                                    <div class="item sb_jc color3">
                                        <!--<span>库存：{{ scope.row.name.inventory }}</span>-->
                                        <span>编号：{{ scope.row.sn }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-table-column>

                    <el-table-column prop="stageName" sortable label="期数">
                    </el-table-column>


                    <el-table-column prop="sellerName" label="供应商">
                    </el-table-column>

                    <el-table-column prop="submit_time" label="上传时间">
                    </el-table-column>

                    <el-table-column prop="status" label="状态">
                    </el-table-column>
                    <el-table-column  label="审核状态">
                        <template slot-scope="scope">
                            <div v-html="scope.row.audit_text"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <span @click="toPreview(scope.row.id)" class="preview">预览</span>
                        </template>
                    </el-table-column>
                </el-table>

            </div>

            <!-- 分页器 -->
            <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="limit"
                           layout="total, prev, pager, next" :total="count">
            </el-pagination>

        </el-card>
    </div>
</template>
<script src='../../../static/js/cruise/cruise_list.js'></script>
<style scoped>
@import "../../../static/css/cruise/cruise_list.css";
</style>



